<!DOCTYPE html>
<html>
	
	<head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>PixiJs - Basic scene</title>
      
      <style>
      
      	canvas {
 		   border: 1px dashed gray;
	  	}
	  	
  		html, body {
    		overflow: hidden;
    		width: 100%;
    		height: 100%;
    		margin: 0;
    		padding: 0;
  		}

	  </style>

   </head>
   
<body>

<h1>My First Web Page</h1>

<p>My first paragraph.</p>

<script src="pixi.js"></script>
<script src="https://raw.githubusercontent.com/toji/gl-matrix/master/dist/gl-matrix.js"></script>
<script src="flatbuffers.js"></script>
<script src="CreatureFlatData_generated.js"></script>
<script src="CreatureMeshBone.js"></script>
<script src="CreaturePixiJSRefRenderer.js"></script>

<script>

    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
	//xobj.open('GET', 'debug3Export_character_data.json', true); // Replace 'my_data' with the path to your file
	
	// Artwork by: Katarzyna Zalecka [http://kasia88.deviantart.com], Attribution-ShareAlike 3.0 Unported
	// Download Asset Files here: http://www.kestrelmoon.com/creaturedocs/Animation_Samples_And_Examples/Samples_And_Videos.html
	xobj.open('GET', 'iceDemonExport_character_data.json', true); // Replace 'my_data' with the path to your file
	xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
//            callback(xobj.responseText);
            var response = xobj.responseText;
              	// Parse JSON string into object
			var actual_JSON = JSON.parse(response);
			//document.write("Loaded JSON file: ");
			
			var new_creature = new Creature(actual_JSON, false);

			var new_animation_1 = new CreatureAnimation(actual_JSON, "default", false);
			
			//var new_animation_1 = new CreatureAnimation(actual_JSON, "idle", false);
			//var new_animation_2 = new CreatureAnimation(actual_JSON, "back", false);
			
			var new_manager = new CreatureManager(new_creature);
			new_manager.AddAnimation(new_animation_1);
			//new_manager.AddAnimation(new_animation_2);
			//new_manager.SetActiveAnimationName("idle", false);
			new_manager.SetActiveAnimationName("default", false);
			new_manager.SetShouldLoop(true);
			new_manager.SetIsPlaying(true);
			new_manager.RunAtTime(0);
			
			// create an new instance of a pixi stage
    		var stage = new PIXI.Stage(0x000000);
 
    		// create a renderer instance.			
    		var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
    		
    		if (renderer.type == PIXI.WEBGL_RENDERER) {
  				console.log('Using WebGL');
			} else {
  				console.log('Using Canvas');
			};
 
    		// add the renderer view element to the DOM
    		document.body.appendChild(renderer.view);
    		    		
    		// create a texture from an image path
    		//var texture = PIXI.Texture.fromImage("debug3Export_character_img.png");
    		var texture = PIXI.Texture.fromImage("iceDemonExport_character_img.png");
    		
    		var creatureContainer = new PIXI.DisplayObjectContainer();
			creatureContainer.position.x = window.innerWidth/2;
			creatureContainer.position.y = window.innerHeight/2;

			creatureContainer.scale.set(35.0);
			stage.addChild(creatureContainer);
			
			var new_creature_renderer = new CreatureRenderer(new_manager, texture);
			creatureContainer.addChild(new_creature_renderer);
			creatureContainer.scale.x = creatureContainer.scale.x;
  
    		function animate() {
 
        		requestAnimationFrame( animate );
        		
			    new_manager.Update(0.05);
			    new_creature_renderer.refresh();
        		
        		// render the stage   
        		renderer.render(stage);
    		}
    		
    		animate();
          }
    };
    xobj.send(null);  
 
 
</script>

</body>
</html> 